<script setup name="CommissionBook">
import { getToken } from '@/utils/auth'
import { listExcel, getListByIds, listTeamList } from '@/api/commission/book'
import { shortcuts, defaultTime1 } from '@/utils/dateSet'
import { parseTimes } from '@/utils/ruoyi'
const { proxy } = getCurrentInstance()
const userList = ref([])
const userListExcel = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const today = new Date() // 时间
const dateRange = ref([
  today.setHours(0, 0, 0, 0),
  today.setHours(23, 59, 59, 59)
]) // 时间
// setHours(0, 0, 0, 0) 设置时间为当天的00:00:00.000
// toISOString() 转换  2024-05-23T15:59:59.000Z
console.log(dateRange.value[0])
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: '',
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: 'Bearer ' + getToken() },
  // 上传的地址
  url:
    import.meta.env.VITE_APP_BASE_API +
    '/credits/statementOfAccount/importStatementOfAccount'
})

const data = reactive({
  form: {},
  queryParams: {
    orderSource: undefined, // 订单来源
    keyword: undefined, // 模糊查询
    packageOperator: undefined, // 运营商
    packageSource: undefined, // 套餐来源
    sourceRemark: undefined, // 来源备注
    packageId: undefined, // 套餐id
    packageName: undefined, // 套餐名称
    startTime: dateRange.value[0], // 开始时间
    endTime: dateRange.value[1], // 结束时间
    type: 'commissions' // 结束时间
  },
  ByIds: [], // 下载明细参数
  rules: {
    userName: [
      { required: true, message: '用户名称不能为空', trigger: 'blur' },
      {
        min: 2,
        max: 20,
        message: '用户名称长度必须介于 2 和 20 之间',
        trigger: 'blur'
      }
    ]
  }
})
const { queryParams, form, rules, ByIds } = toRefs(data)
const changeDate = () => {
  queryParams.value.startTime = new Date(dateRange.value[0]).getTime()
  queryParams.value.endTime = new Date(dateRange.value[1]).getTime()
}

/** 查询用户列表 */
const t1Count = ref([]) // t+1单量
const t1Amount = ref([]) // t+1金额
const tnCount = ref([]) // t+n单量
const tnAmount = ref([]) // t+n金额
function getList () {
  loading.value = true
  listExcel(proxy.addDateRange(queryParams.value)).then(res => {
    loading.value = false
    t1Count.value = [] // 清空月份
    t1Amount.value = [] // 清空月份
    tnCount.value = [] // 清空月份
    tnAmount.value = [] // 清空月份
    userList.value = res.data
    total.value = res.total
    res.data.map(item => {
      // console.log(item.t1Amount, 999)
      item.t1Count.forEach(item2 => {
        t1Count.value.push(item2.month)
        t1Count.value = [...new Set(t1Count.value)]
      })
      item.t1Amount.forEach(item2 => {
        t1Amount.value.push(item2.month)
        t1Amount.value = [...new Set(t1Count.value)]
      })

      item.tnCount.forEach(item2 => {
        tnCount.value.push(item2.month)
        tnCount.value = [...new Set(t1Count.value)]
      })

      item.tnAmount.forEach(item2 => {
        tnAmount.value.push(item2.month)
        tnAmount.value = [...new Set(t1Count.value)]
      })
      return item
    })
  })
}
// 订单来源查询
const TeamList = ref([])
function listTeam () {
  listTeamList().then(response => {
    TeamList.value = response.data
  })
}
listTeam()
/** 搜索按钮操作 */
function handleQuery () {
  getList()
}
/** 重置按钮操作 */
function resetQuery () {
  dateRange.value = [today.setHours(0, 0, 0, 0), today.setHours(23, 59, 59, 59)]
  proxy.resetForm('queryRef')
  queryParams.value.orderSource = undefined
  queryParams.value.keyword = undefined
  queryParams.value.startTime = dateRange.value[0]
  queryParams.value.endTime = dateRange.value[1]
  queryParams.value.type = 'commissions'
  // proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery()
}
/** 导出按钮操作 */
function handleExport () {
  proxy.download(
    'credits/orderStatistics/exportOrderStatisticsList',
    {
      ...queryParams.value
    },
    `佣金台账-${new Date().getTime()}.xlsx`
  )
}
function handleExportListByIds () {
  proxy.download(
    '/credits/statementOfAccount/exportListByIds',
    { ids: ByIds.value.toString() },
    `明细导出-${new Date().getTime()}.xlsx`
  )
}

/** 选择条数  */
function handleSelectionChange (selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 重置操作表单 */
function reset () {
  form.value = {}
  proxy.resetForm('commission')
}

/** 明细按钮操作 */
function handleUpdate (row) {
  reset()
  // console.log(row, 111)
  ByIds.value = row
  open.value = true
  getListByIds({ statementOfCountIds: row }).then(response => {
    userListExcel.value = response.data
  })
}
// 改变某一列单元格背景颜色
function tableCellStyle ({ row, column, rowIndex, columnIndex }) {
  console.log(row.taskColor, '-->row.taskColor')
  let rowBackground = {}
  if (row.paymentOfCommissionRate < 80 && row.paymentOfCommissionRate > 0) {
    if (columnIndex === 9) {
      rowBackground.background = '#a0cfff'
    }
  }
  if (
    row.paymentOfCommissionSendRate < 80 &&
    row.paymentOfCommissionSendRate > 0
  ) {
    if (columnIndex === 10) {
      rowBackground.background = '#a0cfff'
    }
  }
  if (row.activeOfCommissionRate < 80 && row.activeOfCommissionRate > 0) {
    if (columnIndex === 11) {
      rowBackground.background = '#a0cfff'
    }
  }
  return rowBackground
}

getList()
// 求和操作
function toPercentage (num) {
  const percentage = num * 100
  const result = parseFloat(percentage.toFixed(2))
  return result + '%'
}
function getSummaries (param) {
  const { columns, data } = param
  const sums = []
  const aaa = ref()
  const bbb = ref()
  const ccc = ref()
  const ddd = ref()
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计:'
    }
    if (index === 5) {
      const values = data.map(item => Number(item[column.property]))
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            // 保存了两位小数点
            return Math.floor((prev + curr) * 100) / 100
          } else {
            // 保存了两位小数点
            return Math.floor(prev * 100) / 100
          }
        }, 0)
        sums[index] += ' '
      } else {
        sums[index] = 'N/A'
      }
      aaa.value = sums[index]
    }
    if (index === 6) {
      const values = data.map(item => Number(item[column.property]))
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            // 保存了两位小数点
            return Math.floor((prev + curr) * 100) / 100
          } else {
            // 保存了两位小数点
            return Math.floor(prev * 100) / 100
          }
        }, 0)
        sums[index] += ' '
      } else {
        sums[index] = 'N/A'
      }
      bbb.value = sums[index]
    }
    if (index === 7) {
      const values = data.map(item => Number(item[column.property]))
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            // 保存了两位小数点
            return Math.floor((prev + curr) * 100) / 100
          } else {
            // 保存了两位小数点
            return Math.floor(prev * 100) / 100
          }
        }, 0)
        sums[index] += ' '
      } else {
        sums[index] = 'N/A'
      }
      ccc.value = sums[index]
    }
    if (index === 8) {
      const values = data.map(item => Number(item[column.property]))

      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            // 保存了两位小数点
            return Math.floor((prev + curr) * 100) / 100
          } else {
            // 保存了两位小数点
            return Math.floor(prev * 100) / 100
          }
        }, 0)
        sums[index] += ' '
      } else {
        sums[index] = 'N/A'
      }
      ddd.value = sums[index]
    } else if (index === 9) {
      sums[index] = toPercentage(ddd.value / aaa.value)
    } else if (index === 10) {
      sums[index] = toPercentage(ddd.value / bbb.value)
    } else if (index === 11) {
      if (ddd.value == 0 && ccc.value == 0) {
        sums[index] = 0 + '%'
      } else {
        sums[index] = toPercentage(ddd.value / ccc.value)
      }
    }

    // index >= 5 || index <= 7 是你需要计算的列
    // 当然也可以指定一个或者多个列
    // index === 2 || index === 3 这样值求和第二个与第三个列
  })
  return sums
}
</script>

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="订单来源" prop="orderSource">
        <el-select v-model="queryParams.orderSource" clearable filterable>
          <el-option
            v-for="item in TeamList"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运营商" prop="packageOperator">
        <el-input
          v-model="queryParams.packageOperator"
          placeholder="请输入运营商"
          clearable
        />
      </el-form-item>
      <el-form-item label="套餐来源" prop="packageSource">
        <el-input
          v-model="queryParams.packageSource"
          placeholder="请输入套餐来源"
          clearable
        />
      </el-form-item>
      <el-form-item label="来源备注" prop="sourceRemark">
        <el-input
          v-model="queryParams.sourceRemark"
          placeholder="请输入来源备注"
          clearable
        />
      </el-form-item>
      <el-form-item label="套餐id" prop="packageId">
        <el-input
          v-model="queryParams.packageId"
          placeholder="请输入套餐id"
          clearable
        />
      </el-form-item>
      <el-form-item label="套餐名称" prop="packageName">
        <el-input
          v-model="queryParams.packageName"
          placeholder="请输入套餐名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="订单时间" prop="date">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="defaultTime1"
          type="datetimerange"
          :shortcuts="shortcuts"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDate"
        />
      </el-form-item>
      <el-form-item label="模糊查询" prop="keyword">
        <el-select v-model="queryParams.type" clearable style="width: 240px">
          <el-option key="0" label="佣金收入" value="commissions" />
          <el-option key="1" label="部门分佣" value="deptCommissions" />
          <el-option key="2" label="差额" value="difference" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport"
          >导出</el-button
        >
      </el-col>

      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :summary-method="getSummaries"
      :data="userList"
      max-height="650"
      show-summary
      :cell-style="tableCellStyle"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column label="运营商" align="center" fixed>
        <template #default="scope">
          <span>{{ scope.row.packageOperator }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="套餐来源"
        align="center"
        fixed
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <span>{{ scope.row.packageSource }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="来源备注"
        align="center"
        fixed
        width="150"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <span>{{ scope.row.sourceRemark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="套餐id" align="center" fixed>
        <template #default="scope">
          <span>{{ scope.row.packageId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="套餐名称"
        align="center"
        fixed
        :show-overflow-tooltip="true"
        width="700"
      >
        <template #default="scope">
          <span>{{ scope.row.packageName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="录单量" align="center" prop="count">
        <template #default="scope">
          <span
            :style="scope.row.count === 0 ? 'color:#fff' : 'color:#606266'"
            >{{ scope.row.count }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="发货量" align="center" prop="sendOutCount">
        <template #default="scope">
          <span
            :style="
              scope.row.sendOutCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.sendOutCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="激活量" align="center" prop="activationCount">
        <template #default="scope">
          <span
            :style="
              scope.row.activationCount === 0 ? 'color:#fff' : 'color:#606266'
            "
            >{{ scope.row.activationCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="结佣量"
        align="center"
        prop="paymentOfCommissionCount"
      >
        <template #default="scope">
          <span
            :style="
              scope.row.paymentOfCommissionCount === 0
                ? 'color:#fff'
                : 'color:#606266'
            "
            >{{ scope.row.paymentOfCommissionCount }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="录单量结佣率" align="center">
        <template #default="scope">
          <span
            :style="
              scope.row.paymentOfCommissionRate === 0
                ? 'color:#fff'
                : 'color:#606266'
            "
            >{{ scope.row.paymentOfCommissionRate }}%</span
          >
        </template>
      </el-table-column>
      <el-table-column label="发货量结佣率" align="center">
        <template #default="scope">
          <span
            :style="
              scope.row.paymentOfCommissionSendRate === 0
                ? 'color:#fff'
                : 'color:#606266'
            "
            >{{ scope.row.paymentOfCommissionSendRate }}%</span
          >
        </template>
      </el-table-column>
      <el-table-column label="激活结佣率" align="center">
        <template #default="scope">
          <span
            :style="
              scope.row.activeOfCommissionRate === 0
                ? 'color:#fff'
                : 'color:#606266'
            "
            >{{ scope.row.activeOfCommissionRate }}%</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="150"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row.statementOfCountIds)"
            >明细</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="t+1单量" align="center">
        <el-table-column :label="t1Count[0]" align="center" prop="t1Count1">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count1.statementOfCountIds)"
              :style="
                scope.row.t1Count1.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count1.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Count[1]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count2.statementOfCountIds)"
              :style="
                scope.row.t1Count2.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count2.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Count[2]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count3.statementOfCountIds)"
              :style="
                scope.row.t1Count3.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count3.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Count[3]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count4.statementOfCountIds)"
              :style="
                scope.row.t1Count4.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count4.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Count[4]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count5.statementOfCountIds)"
              :style="
                scope.row.t1Count5.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count5.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Count[5]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count6.statementOfCountIds)"
              :style="
                scope.row.t1Count6.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count6.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Count[6]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count7.statementOfCountIds)"
              :style="
                scope.row.t1Count7.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count7.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Count[7]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count8.statementOfCountIds)"
              :style="
                scope.row.t1Count8.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count8.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Count[8]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Count9.statementOfCountIds)"
              :style="
                scope.row.t1Count9.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Count9.count }}</span
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="t+1金额" align="center">
        <el-table-column :label="t1Amount[0]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount1.statementOfCountIds)"
              :style="
                scope.row.t1Amount1.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount1.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Amount[1]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount2.statementOfCountIds)"
              :style="
                scope.row.t1Amount2.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount2.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Amount[2]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount3.statementOfCountIds)"
              :style="
                scope.row.t1Amount3.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount3.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Amount[3]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount4.statementOfCountIds)"
              :style="
                scope.row.t1Amount4.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount4.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Amount[4]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount5.statementOfCountIds)"
              :style="
                scope.row.t1Amount5.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount5.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Amount[5]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount6.statementOfCountIds)"
              :style="
                scope.row.t1Amount6.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount6.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Amount[6]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount7.statementOfCountIds)"
              :style="
                scope.row.t1Amount7.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount7.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Amount[7]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount8.statementOfCountIds)"
              :style="
                scope.row.t1Amount8.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount8.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="t1Amount[8]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.t1Amount9.statementOfCountIds)"
              :style="
                scope.row.t1Amount9.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.t1Amount9.count }}</span
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="t+n单量" align="center">
        <el-table-column :label="tnCount[0]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount1.statementOfCountIds)"
              :style="
                scope.row.tnCount1.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount1.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnCount[1]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount2.statementOfCountIds)"
              :style="
                scope.row.tnCount2.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount2.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnCount[2]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount3.statementOfCountIds)"
              :style="
                scope.row.tnCount3.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount3.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnCount[3]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount4.statementOfCountIds)"
              :style="
                scope.row.tnCount4.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount4.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnCount[4]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount5.statementOfCountIds)"
              :style="
                scope.row.tnCount5.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount5.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnCount[5]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount6.statementOfCountIds)"
              :style="
                scope.row.tnCount6.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount6.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnCount[6]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount7.statementOfCountIds)"
              :style="
                scope.row.tnCount7.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount7.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnCount[7]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount8.statementOfCountIds)"
              :style="
                scope.row.tnCount8.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount8.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnCount[8]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnCount9.statementOfCountIds)"
              :style="
                scope.row.tnCount9.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnCount9.count }}</span
            >
          </template>
        </el-table-column></el-table-column
      >
      <el-table-column label="t+n金额" align="center">
        <el-table-column :label="tnAmount[0]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount1.statementOfCountIds)"
              :style="
                scope.row.tnAmount1.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount1.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnAmount[1]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount2.statementOfCountIds)"
              :style="
                scope.row.tnAmount2.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount2.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnAmount[2]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount3.statementOfCountIds)"
              :style="
                scope.row.tnAmount3.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount3.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnAmount[3]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount4.statementOfCountIds)"
              :style="
                scope.row.tnAmount4.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount4.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnAmount[4]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount5.statementOfCountIds)"
              :style="
                scope.row.tnAmount5.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount5.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnAmount[5]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount6.statementOfCountIds)"
              :style="
                scope.row.tnAmount6.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount6.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnAmount[6]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount7.statementOfCountIds)"
              :style="
                scope.row.tnAmount7.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount7.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnAmount[7]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount8.statementOfCountIds)"
              :style="
                scope.row.tnAmount8.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount8.count }}</span
            >
          </template>
        </el-table-column>
        <el-table-column :label="tnAmount[8]" align="center">
          <template #default="scope">
            <span
              @click="handleUpdate(scope.row.tnAmount9.statementOfCountIds)"
              :style="
                scope.row.tnAmount9.count === 0 ? 'color:#fff' : 'color:#606266'
              "
              >{{ scope.row.tnAmount9.count }}</span
            >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <!-- 明细详情框 -->
    <el-dialog v-model="open" width="80%" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExportListByIds"
            >导出</el-button
          >
        </el-col>
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <el-table
        v-loading="loading"
        :data="userListExcel"
        max-height="650"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column
          label="ID"
          align="center"
          key="id"
          prop="id"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="账单时间"
          align="center"
          prop="accountDate"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <span>{{ parseTimes(scope.row.accountDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="渠道"
          align="center"
          prop="channel"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="上游id"
          align="center"
          prop="upStreamId"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="套餐id"
          align="center"
          prop="skuId"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="套餐名称"
          align="center"
          prop="skuName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="激活时间"
          align="center"
          prop="activeTime"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <span>{{ parseTimes(scope.row.activeTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="公司收单政策"
          align="center"
          prop="companyPolicy"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="店铺分佣政策"
          align="center"
          prop="shopPolicy"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="公司奖罚类别"
          align="center"
          prop="companyRewardType"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="店铺奖罚类别"
          align="center"
          prop="shopRewardType"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="仓库"
          align="center"
          prop="warehouse"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="台账名称"
          align="center"
          prop="meetingName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="达成订单id"
          align="center"
          prop="orderId"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="是否结算"
          align="center"
          prop="settlement"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="佣金"
          align="center"
          prop="commissions"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="店铺分佣"
          align="center"
          prop="deptCommissions"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="充值"
          align="center"
          prop="recharge"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="级别"
          align="center"
          prop="level"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          :show-overflow-tooltip="true"
        />
      </el-table>
    </el-dialog>
  </div>
</template>
